<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="addNode">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="角色名称" style="width: 200px" class="filter-item" clearable @clear="getTableList" />
                </el-form-item>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-search" native-type="submit" @click="getTableList">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="right">
            <el-switch v-model="isExpand" active-text="全部展开" inactive-text="关闭所有行" @change="changeExpand">
            </el-switch>
        </div>
    </div>
    <el-table class="page-body" :height="tableHeight" ref="mainTable" :data="tableData" element-loading-text="Loading" border fit :default-expand-all="isExpand" :expand-row-keys="expandRows" :row-key="getRowKeys" highlight-current-row :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="节点标题" prop="title">
            <template slot-scope="scope">
                {{ scope.row.title }}
            </template>
        </el-table-column>
        <el-table-column label="路由" prop="path"></el-table-column>
        <el-table-column label="是否菜单" prop="is_menu">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.is_menu == 1" size="small">菜单</el-tag>
                <el-tag v-if="scope.row.is_menu == 2" size="small">目录</el-tag>
                <el-tag v-if="scope.row.is_menu == 3" size="small">功能</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="上/下架" prop="status">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0" size="small" type="error">下架</el-tag>
                <el-tag v-else size="small">上架</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300px">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="editNode(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteNode(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <edit-node ref="editNode" @getTableData="getTableList"></edit-node>
</div>
</template>

<script>
import {
    getNodeTreeApi,
    deleteNodeApi
} from "@/api/auth/node";

import editNode from "./edit.vue";
export default {
    components: {
        editNode,
    },
    data() {
        return {
            query: {
                keyword: "",
            },
            isExpand: false,
            expandRows: [],
            tableHeight: '697px',
            tableData: [{
                id: 1,
                name: "超级管理员",
                count: 99,
            }, ],
        };
    },
    created() {
        // 获取列表
        this.getTableList();
    },
    mounted() {
        this.$nextTick(() => {
            if (this.$refs['mainTable']) {
                const tableHeight = this.$refs['mainTable'].$el.offsetHeight;
                this.tableHeight = tableHeight + 'px';
            }
        })
        
    },
    methods: {
        // 获取列表信息
        getTableList() {
            getNodeTreeApi(this.query).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.tree;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        // 获取行的id
        getRowKeys(row) {
            return row.id;
        },
        // 展开树
        changeExpand(e) {
            if (e) {
                let rows = [];
                this.tableData.forEach((ele) => {
                    if (ele.children) rows.push(ele.id + "");
                });
                this.expandRows = rows;
            } else {
                this.tableData.forEach((ele) => {
                     this.$refs['mainTable'].toggleRowExpansion(ele, false);
                });
               
            }
        },

        // 添加角色
        addNode() {
            if (this.$refs["editNode"]) {
                this.$refs["editNode"].showDrawerByCreate();
            } else {
                this.$nextTick(function () {
                    this.$refs["editNode"].showDrawerByCreate();
                });
            }
        },

        // 编辑名称
        editNode(data) {
            if (this.$refs["editNode"]) {
                this.$refs["editNode"].showDrawerByEdit(data);
            } else {
                this.$nextTick(function () {
                    this.$refs["editNode"].showDrawerByEdit(data);
                });
            }
        },
        // 删除节点
        deleteNode(data) {
            let query = data;
            this.$confirm("是否删除节点?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    deleteNodeApi(query).then((res) => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.getTableList();
                        } else {
                            this.$message.warning(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>
